<script setup lang="ts">
import {onMounted} from "vue";
import useMenuStore from "@/store/modules/menu.ts";
import {toDate} from "@/utils";
import {Edit, FolderAdd} from "@element-plus/icons-vue";
const menuStore = useMenuStore();
onMounted(()=>{
    // 获取菜单列表
    menuStore.getSysAllMenuAsync();
})
const tableRowClassName = ({rowIndex}: {rowIndex: number }) => {
    const i = rowIndex%4;
    if (i === 0) {
        return 'warning-row'
    } else if (i === 2) {
        return 'success-row'
    }
    return ''
}
defineOptions({
    name:"SysMenu"
})
</script>

<template>
    <el-card>
        <el-button :icon="FolderAdd" type="primary">添加菜单</el-button>
    </el-card>
    <el-table  height="500" row-key="_id" border :data="menuStore.allMenuList"  :row-class-name="tableRowClassName"
              style="width: 100%;margin-top:10px;">
        <el-table-column prop="name" label="菜单名称" min-width="150" />
        <el-table-column label="图标" width="180">
            <template #default="scope">
                <el-icon><component :is="scope.row.icon"/></el-icon>
                {{scope.row.icon}}
            </template>
        </el-table-column>
        <el-table-column  align="center" label="状态"  width="120">
            <template #default="scope">
                <el-switch @change="(val:boolean)=>menuStore.putSysMenuAsync(scope.row._id,val?1:0)" size="large" :model-value="scope.row.status===1" inline-prompt active-text="正常" inactive-text="禁用" />
            </template>
        </el-table-column>
        <el-table-column  align="center" prop="sign" label="权限标识"  width="150" />
        <el-table-column  align="center" prop="routePath" label="路由地址"  width="150"/>
        <el-table-column  align="center" prop="componentPath" label="组件地址"  width="150"/>
        <el-table-column  align="center" prop="sort" label="排序"  width="150"/>
        <el-table-column  align="center" label="创建时间"  width="180">
            <template #default="scope">
                <el-text>{{toDate(scope.row.createTime)}}</el-text>
            </template>
        </el-table-column>
        <el-table-column  align="center" label="修改时间"  width="180">
            <template #default="scope">
                <el-text>{{toDate(scope.row.updateTime)}}</el-text>
            </template>
        </el-table-column>
        <el-table-column fixed="right" align="center" label="操作"  width="150">
            <template #default>
                <el-button type="primary" :icon="Edit" circle />
                <el-button type="primary" :icon="Edit" circle />
                <el-button type="primary" :icon="Edit" circle />
            </template>
        </el-table-column>
    </el-table>
</template>

<style scoped lang="less">
.el-table{
    :deep(.warning-row) {
        --el-table-tr-bg-color: var(--el-color-warning-light-9);
    }
    :deep(.success-row) {
        --el-table-tr-bg-color: var(--el-color-success-light-9);
    }
}
</style>